<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <!--Extjs version 6.2.0 -->
    <link href="css/theme-classic-all.css" rel="stylesheet" />
    <script type="text/javascript" src="locale/locale-zh_CN.js"></script>
    <script type="text/javascript" src="js/ext-all.js"></script>
    <script type="text/javascript">
        Ext.onReady(function() {
            var accordion = Ext.create("Ext.panel.Panel", {
                title: "west",
                layout: "accordion", //设置为手风琴布局
                layoutConfig: {
                    animate: true
                },
                width: 250,
                minWidth: 90,
                region: "west", //设置方位
                split: true,
                collapsible: true,
                items: [{
                    title: "嵌套面板一",
                    html: "嵌套面板一",
                    iconCls: "save"
                }, {
                    title: "嵌套面板二",
                    html: "嵌套面板二",
                    iconCls: "search"
                }, {
                    title: "嵌套面板三",
                    html: "嵌套面板三",
                    iconCls: "back"
                }, {
                    title: "嵌套面板四",
                    html: "嵌套面板四",
                    iconCls: "12"
                }]
            });

            new Ext.Viewport({
                title: "Viewport",
                layout: "border", //这里是（border）边界布局
                defaults: {
                    bodyStyle: "background-color: #FFFFFF;",
                    frame: true
                },
                items: [
                    accordion, //这里是（accordion）手风琴布局
                    {
                        region: "east",
                        width: 90,
                        title: 'east',
                        collapsible: true
                    }, {
                        region: "north",
                        height: 100,
                        title: 'north',
                        collapsible: true
                    }, {
                        region: "center",
                        split: true,
                        border: true,
                        collapsible: true,
                        title: 'center'
                    }, {
                        region: "south",
                        title: "south",
                        split: true,
                        border: true,
                        collapsible: true,
                        height: 100
                    }
                ]
            });
        });
    </script>
</head>

<body>

</body>

</html>